<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/npm.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/statics/css/bootstrap.css">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url("${pageContext.request.contextPath }/statics/image/注册背景.jpg");
            position: relative;
            user-select: none;
        }

        .clear{
            clear: both;
        }
        .box-register{
            position: absolute;
            right: 170px;
            top: 235px;
            width: 350px;
            height: 500px;
            border-radius: 30px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.6);
        }
        .box-tab{
            padding-left: 50px;
        }

        .reg-size-14{
            font-size: 14px;
        }
        .reg-size-18{
            font-size: 18px;
        }
        .reg-inputbox{
            padding: 30px 20px;
        }
        .reg-margin-bottom-20{
            margin-bottom: 20px;
        }
        .reg-width-250{
            width: 250px;
        }
        .reg-btngo{
            padding: 16px 22px;
            font-size: 22px;
            line-height: 1.3333333;
            border-radius: 12px;
            margin: 25px 55px;
        }
        .reg-iyou{
            padding-top: 8px;
        }
        .reg-textbox{
            position: relative;
            top: 350px;
            left: 250px;
            width: 900px;
            padding-left: 50px;
        }
        .reg-textbox div{
            padding-right: 50px;
        }
        .reg-h1{
            color: white;
            font-size: 48px;
        }
        .reg-p{
            color: white;
            font-size: 22px;
            float: right;
        }

        #drag{
            position: relative;
            background-color: #e8e8e8;
            width: 250px;
            height: 34px;
            line-height: 34px;
            text-align: center;
        }
        #drag .handler{
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 34px;
            border: 1px solid #ccc;
            cursor: move;
        }
        .handler_bg{
            background: #fff;
        }
        #drag .drag_bg{
            background-color: #95ff6b;
            height: 34px;
            width: 0;
        }
        #drag .drag_text{
            position: absolute;
            top: 0;
            width: 250px;
            color: #222222;
            user-select: none;

            font-size: 12px;
        }
    </style>
</head>

<body>
<div style="position: absolute;">
    <div class="reg-textbox">
        <div>
            <h1 class="reg-h1" id="reg-poetry"></h1>
            <p class="reg-p"><span id="reg-author"></span></p>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="box-register">
    <ul class="nav nav-tabs box-tab" role="tablist">
        <li id="regEmail" role="presentation" class="active"><a href="#mailbox" aria-controls="mailbox" role="tab" data-toggle="tab">邮箱注册</a></li>
        <li id="regPhone" role="presentation"><a href="#phonebox" aria-controls="phonebox" role="tab" data-toggle="tab">手机号注册</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content reg-inputbox">
        <div role="tabpanel" class="tab-pane active" id="mailbox">
            <span class="reg-size-18">邮箱:</span><span id="errorEmail" class="reg-size-14"></span>
            <div class="input-group reg-margin-bottom-20 reg-width-250">
                <input type="email" class="form-control" placeholder="请输入邮箱。" aria-describedby="customerEmail" id="customerEmail">
            </div>
            <span class="reg-size-18">密码:</span><span id="errorEmailPwd" class="reg-size-14"></span>
            <div class="input-group reg-margin-bottom-20 reg-width-250">
                <input type="password" class="form-control" placeholder="请输入密码。" aria-describedby="customerEmailPwd" id="customerEmailPwd" maxlength="16">
            </div>
            <span class="reg-size-18">验证码:</span><span id="errorEmailCode" class="reg-size-14"></span>
            <div class="input-group reg-margin-bottom-20 reg-width-250">
                <input type="text" class="form-control" placeholder="输入验证码。" aria-describedby="customerEmailCode" id="customerEmailCode">
                <span class="input-group-btn">
                        <button class="btn btn-default" type="button" id="getEmailCode">获取验证码</button>
                    </span>
            </div>
            <button type="button" class="btn btn-success reg-btngo" id="submitEmail">
                立即注册!
            </button>
        </div>
        <div role="tabpanel" class="tab-pane" id="phonebox">
            <span class="reg-size-18">手机号:</span><span id="errorPhone" class="reg-size-14"></span>
            <div class="input-group reg-margin-bottom-20 reg-width-250">
                <input type="text" class="form-control" placeholder="请输入手机号码。" aria-describedby="customerPhone" id="customerPhone">
            </div>

            <span class="reg-size-18">&nbsp;</span><span id="errorPhoneHuaKuai" class="reg-size-14"></span>
            <div class="input-group reg-margin-bottom-20 reg-width-250">
                <div id="wrapper">
                    <div id="drag">
                        <div class="drag_bg"></div>
                        <div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">
                            请按住滑块，拖动到最右边
                        </div>
                        <div class="handler handler_bg reg-iyou"><i class="glyphicon glyphicon-ok" id="ok" style="display: none"></i><i class="glyphicon glyphicon-arrow-right" id="uok"></i></div>
                    </div>
                </div>
            </div>

            <span class="reg-size-18">验证码:</span><span id="errorPhoneCode" class="reg-size-14"></span>
            <div class="input-group reg-margin-bottom-20 reg-width-250">
                <input type="text" class="form-control" placeholder="输入验证码。" aria-describedby="customerPhoneCode" id="customerPhoneCode">
                <span class="input-group-btn">
                        <button class="btn btn-default" type="button" id="getPhoneCode">获取验证码</button>
                    </span>
            </div>
            <button type="button" class="btn btn-success reg-btngo" id="submitPhone">
                立即注册!
            </button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var EmailCode = 0;
    var PhoneCode = 0;

    var emailAndPhone = false;
    var repeatEmail = false;
    var repeatPhone = false;

    var mailList = ["@gmail.com","@yahoo.com","@msn.com","@hotmail.com","@qq.com","@163.com","@mail.com","@sina.com","@sohu.com","@chinaren.com","@sogou.com"];

    var textList = ["读书破万卷，下笔如有神。","读书不觉已春深，一寸光阴一寸金。","黑发不知勤学早，白首方悔读书迟。","三更灯火五更鸡，正是男儿读书时。","坑灰未冷山东乱，刘项元来不读书。","一日不读书，胸臆无佳想。","二客东南名胜，万卷诗书事业，尝试与君谋。","早知逢世乱，少小谩读书。","读书复骑谢，带剑游淮阴。","儿大诗书女丝麻，公但读书煮春茶。","驿亭幽绝堪垂钓，岩石虚明可读书。","田中读书慕尧舜，坐待四海升平年","寂历弹琴地，幽流读书堂。","灯火纸窗修竹里，读书声。"];
    var authorList = ["杜甫《奉赠韦左丞丈二十二韵》","王贞白《白鹿洞二首·其一》","颜真卿《劝学诗》","颜真卿《劝学诗》","章碣《焚书坑》","萧抡谓《读书有所见作》","辛弃疾《水调歌头·舟次扬州和人韵》","岑参《行军诗二首（时扈从在凤翔）》","王维《送从弟蕃游淮南》","黄庭坚《送王郎》","欧阳修《咏零陵》","高启《练圻老人农隐》","刘希夷《蜀城怀古》","陈继儒《浣溪沙·初夏夜饮归》"];

    $(function () {

        function RandomNum(Min, Max) {
            var Range = Max - Min;
            var Rand = Math.random();
            if(Math.round(Rand * Range)==0){
                return Min + 1;
            }else if(Math.round(Rand * Max)==Max)
            {
                return Max - 1;
            }else{
                var num = Min + Math.round(Rand * Range) - 1;
                return num;
            }
        }
        function poetryShow(){
            i = RandomNum(1,textList.length)-1;
            $("#reg-poetry").text(textList[i]);
            $("#reg-author").text("—— "+authorList[i]);
            $(".reg-textbox").css("border","5px white solid");
        }
        poetryShow();

        $("body").keydown(function() {
            if (event.keyCode == "13") {//keyCode=13是回车键
                if(emailAndPhone){
                    $('#submitEmail').click();
                }else{
                    $('#submitPhone').click();
                }
            }
        });

        $("#regEmail").click(function () {
            $("#errorPhone").html("");
            $("#errorPhoneHuaKuai").html("");
            $("#errorPhoneCode").html("");
            emailAndPhone = true;
        });
        $("#regPhone").click(function () {
            $("#errorEmail").html("");
            $("#errorEmailPwd").html("");
            $("#errorEmailCode").html("");
            emailAndPhone = false;
        });

        $("#getEmailCode").click(function () {

            if (!checkEmail()) {
                $("#errorEmail").html("请输入正确的邮箱格式!").css("color", "red"
                );
            } else {
                EmailCode = parseInt(Math.random() * (999999 - 100000 + 1) + 100000);
                var emailNum = $("#customerEmail").val();

                console.log(EmailCode);
                $.post({
                    url: "${pageContext.request.contextPath }/start/getEmailCode",
                    data: "email=" + emailNum + "&inCode=" + EmailCode,
                    dataType: "json",
                    success: function (data) {
                        var jsonData = JSON.parse(data);
                        if(jsonData.status == 200){
                            $("#errorEmailCode").html(jsonData.message).css("color","#88ff88");
                        }else{
                            $("#errorEmailCode").html(jsonData.message).css("color","#ffbb44");
                        }
                    },
                    error: function () {
                        console.log("Email发送失败!");
                    }
                });

                var btn = $(this);
                var count = 60;
                var resend = setInterval(function () {
                    count--;
                    if (count > 0) {
                        btn.html(count + "秒后可重新获取");
                    } else {
                        clearInterval(resend);
                        btn.html("获取验证码").removeAttr('disabled style');
                    }
                }, 1000);
                btn.attr('disabled', true).css('cursor', 'not-allowed');
            }
        });
        $("#getPhoneCode").click(function () {
            if(!emailAndPhone){
                $("#errorPhoneHuaKuai").html("请先拖动滑块验证!").css("color","red");
            }
            if(checkPhone()&&emailAndPhone){
                PhoneCode = parseInt(Math.random() * (999999 - 100000 + 1) + 100000);
                var phoneNum = $("#customerPhone").val();

                console.log(PhoneCode);
                $.post({
                    url:"${pageContext.request.contextPath }/start/getPhoneCode",
                    data:"phone="+phoneNum+"&inCode="+PhoneCode,
                    dataType: "json",
                    success:function (data) {
                        var jsonData = JSON.parse(data);
                        if(jsonData.status == 200){
                            $("#errorPhoneCode").html(jsonData.message).css("color","#88ff88");
                        }else{
                            $("#errorPhoneCode").html(jsonData.message).css("color","#ffbb44");
                        }
                    },
                    error:function () {
                        console.log("SMS发送失败!");
                    }
                });

                var btn = $(this);
                var count = 60;
                var resend = setInterval(function(){
                    count--;
                    if (count > 0){
                        btn.html(count+"秒后可重新获取");
                    }else {
                        clearInterval(resend);
                        btn.html("获取验证码").removeAttr('disabled style');
                    }
                }, 1000);
                btn.attr('disabled',true).css('cursor','not-allowed');
            }
        });

        $("#customerEmail").blur(function () {
            if(checkEmail()){
                $.post({
                    url:"${pageContext.request.contextPath }/customer/checkEmail",
                    data:"customerEmail="+$("#customerEmail").val(),
                    dataType: "json",
                    success:function (data) {
                        var jsonData = JSON.parse(data);
                        if(jsonData.data && jsonData.status == 200){
                            $("#errorEmail").html(jsonData.message).css("color","#8d40dc");
                            repeatEmail = true;
                        }else if(jsonData.status == 233){
                            $("#errorEmail").html(jsonData.message).css("color","#f5307d");
                            repeatEmail = false;
                        }
                    },
                    error:function () {
                        console.log("发生错误!");
                        repeatEmail = false;
                    }
                });
            }else{
                $("#errorEmail").html("请输入正确的邮箱格式!").css("color","red");
            }
        });
        $("#customerEmailPwd").blur(function () {
            checkEmailPwd();
        });

        $("#customerPhone").blur(function () {
            if(checkPhone){
                $.post({
                    url:"${pageContext.request.contextPath }/customer/checkPhone",
                    data:"customerTel="+$("#customerPhone").val(),
                    dataType: "json",
                    success:function (data) {
                        var jsonData = JSON.parse(data);
                        if(jsonData.data && jsonData.status == 200){
                            $("#errorPhone").html(jsonData.message).css("color","#8d40dc");
                            repeatPhone = true;
                        }else if(jsonData.status == 233){
                            $("#errorPhone").html(jsonData.message).css("color","#f5307d");
                            repeatPhone = false;
                        }
                    },
                    error:function () {
                        console.log("发生错误!");
                        repeatPhone = false;
                    }
                });
            }
        });

        $("#submitEmail").click(function () {
            var emailNum = $("#customerEmail").val();
            var emailPwd = $("#customerEmailPwd").val();
            if(checkMail()&&repeatEmail){
                EmailCode = 0;
                $.post({
                    url:"${pageContext.request.contextPath }/customer/insertEmailCustomer",
                    data:"customerEmail="+emailNum+"&customerPwd="+emailPwd,
                    dataType: "json",
                    success:function (data) {
                        var jsonData = JSON.parse(data);
                        if(jsonData.status == 200){
                            console.log(jsonData.message);
                        }else{

                        }
                    },
                    error:function () {
                        console.log("添加失败!");
                    }
                });
            }
        });
        $("#submitPhone").click(function () {
            if(checkPhoneCode()&&repeatPhone){
                var PhoneNum = $("#customerPhone").val();
                PhoneCode = 0;
                $.post({
                    url:"${pageContext.request.contextPath }/customer/insertPhoneCustomer",
                    data:"customerTel="+PhoneNum,
                    dataType: "json",
                    success:function (data) {
                        var jsonData = JSON.parse(data);
                        if (jsonData.status == 200) {
                            console.log(jsonData.message);
                        } else {
                        }
                    },error:function () {
                        console.log("添加失败!");
                    }
                });
            }
        });

        function checkMail() {
            if(!checkEmail()){
                $("#errorEmail").html("请输入正确的邮箱格式!").css("color","red");
                return false;
            }
            if(!checkEmailPwd()){
                return false;
            }
            return checkEmailCode();
        }
        function checkEmail (){
            if($("#customerEmail").val()==""){
                $("#errorEmail").html("请填写邮箱!").css("color","red");
                return false;
            }
            var mailfix = $("#customerEmail").val().substring($("#customerEmail").val().indexOf("@"));
            var mailLength = mailList.length;
            for(var i=0;i< mailLength;i++) {
                if (mailfix == (mailList[i])) {
                    return true;
                }
            }
            return false;
        }
        function checkEmailPwd() {
            var EmailPwdLength = $("#customerEmailPwd").val().length;
            if(EmailPwdLength < 6){
                $("#errorEmailPwd").html("密码不得少于6位").css("color","red");
                return false;
            }
            return true;
        }
        function checkEmailCode() {
            if($("#customerEmailCode").val()==""){
                $("#errorEmailCode").html("请输入验证码!").css("color","red");
                return false;
            }
            var tempEmailCode = $("#customerEmailCode").val()-1+1;
            if(tempEmailCode != EmailCode){
                $("#errorEmailCode").html("验证码错误").css("color","red");
                return false;
            }
            return true;
        }

        function checkPhone (){
            if($("#customerPhone").val()==""){
                $("#errorPhone").html("请填写电话!").css("color","red");
                return false;
            }
            if ($("#customerPhone").val().length==11) {
                $("#errorPhone").html("");
                return true;
            }
            $("#errorPhone").html("请确认号码是否错误!").css("color","red");
            return false;
        }

        function checkPhoneCode() {
            if($("#customerPhoneCode").val()==""){
                $("#errorPhoneCode").html("请输入验证码!").css("color","red");
                return false;
            }
            var tempPhoneCode = $("#customerPhoneCode").val()-1+1;
            if(tempPhoneCode != PhoneCode){
                $("#errorPhoneCode").html("验证码错误").css("color","red");
                return false;
            }
            return true;
        }

        $("#customerEmail").focus(function () {
            $("#errorEmail").html("");
        });
        $("#customerEmailPwd").focus(function () {
            $("#errorEmailPwd").html("");
        });
        $("#customerEmailCode").focus(function () {
            $("#errorEmailCode").html("");
        });

        $("#customerPhone").focus(function () {
            $("#errorPhone").html("");
        });
        $("#customerPhoneCode").focus(function () {
            $("#errorPhoneCode").html("");
        });

        //滑块
        $.fn.drag = function(options) {
            var x, drag = this, isMove = false, defaults = {
            };
            var options = $.extend(defaults, options);
            var handler = drag.find('.handler');
            var drag_bg = drag.find('.drag_bg');
            var text = drag.find('.drag_text');
            var maxWidth = drag.width() - handler.width();  //能滑动的最大间距

            //鼠标按下时候的x轴的位置
            handler.mousedown(function(e) {
                isMove = true;
                x = e.pageX - parseInt(handler.css('left'), 10);
            });

            //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
            $(document).mousemove(function(e) {
                var _x = e.pageX - x;
                if (isMove) {
                    if (_x > 0 && _x <= maxWidth) {
                        handler.css({'left': _x,'transition':'0s'});
                        drag_bg.css({'width': _x,'transition':'0s'});
                    } else if (_x > maxWidth) {  //鼠标指针移动距离达到最大时清空事件
                        dragOk();
                    }
                }
            }).mouseup(function(e) {
                isMove = false;
                var _x = e.pageX - x;
                if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                    handler.css({'left': 0,'transition':'0.3s'});
                    drag_bg.css({'width': 0,'transition':'0.3s'});
                }
            });

            //清空事件
            function dragOk() {
                $("#ok").css("display","block");
                $("#uok").css("display","none");
                $("#errorPhoneHuaKuai").html("");
                emailAndPhone = true;
                text.removeClass('slidetounlock').text('验证通过').css({'color':'#4b4b4b'});       //modify

                handler.css({'left': maxWidth});
                drag_bg.css({'width': maxWidth});

                handler.unbind('mousedown');
                $(document).unbind('mousemove');
                $(document).unbind('mouseup');
            }
        };
        $('#drag').drag();
    });
</script>
</html>